<template>
    <div>
        <h1>口算2</h1>
        <el-form label-width="100px">
            <el-form-item label="">
                <el-button type="primary" @click="changeQues">换一组题</el-button>
            </el-form-item>
        </el-form>
        <div style="padding:10px 10px">

            <div style="font-size: 30px;">
                <div v-for="(ques, index) in quesArr" style="margin-bottom: 5px;" :key="index">
                    <span>{{ques.x}}</span> <span v-if="ques.y1 != 1">&nbsp;{{ques.symbol}} {{ques.y1}}</span> + {{ques.x}} <span v-if="ques.y2 != 1"> {{ques.symbol}} {{ques.y2}} </span>&nbsp; &nbsp;=&nbsp;<el-input v-model="ques.y" style="width:100px;font-size: 30px;" ></el-input>
                    <span style="margin-left: 5px;" v-show="showAnswer">
                        答案：{{ques.answer}} &nbsp;
                        <i v-if="ques.y == ques.answer" class="el-icon-check" style="color:green"></i>
                        <i v-else class="el-icon-close" style="color:red"></i>
                    </span>
                    <el-button type="primary" @click="addToLib(ques)">{{ques.added ? '已加' : '加入题库'}}</el-button>
                </div>
                <div v-if="quesArr.length == 0">
                    无题
                </div>
            </div>
        </div>
        <div>
            <el-button type="primary" @click="submitAnswer">提交答案</el-button>
        </div>
    </div>
</template>

<script>
    import util from "@/util/util";

    export default {
        name: "oral2.vue",
        data() {
            return {
                product: 100,
                quesArr: [],
                showAnswer: false,
            }
        },
        methods: {
            addToLib(ques) {
                let y1 = ques.y1 != 1 ? ques.symbol  + ques.y1 : ''
                let y2 = ques.y2 != 1 ? ques.symbol + ques.y2 : ''
                let quesDesc = ques.x + y1  + '+' + ques.x + y2 + '=' + "__"
                let ques2 = {
                    desc: quesDesc
                }
                util.addToLib(ques2)
                this.$set(ques, 'added', true)
            },
            changeQues() {

                this.showAnswer = false
                let quesArr = []
                let size = 10
                for(let i = 0; i < size; i++) {
                    let factor1 = parseInt(Math.random() * 100)
                    let factor21 = parseInt(Math.random() * 100)
                    let factor22 = 100 - factor21
                    let r = factor1 * (factor21 + factor22)
                    // console.log('factorArr:', factorArr)
                    let ques = {
                        x: factor1,
                        symbol: '✖',
                        y1: factor21,
                        y2: factor22,
                        r: null,
                        answer: r,
                    }
                    quesArr.push(ques)
                }
                this.quesArr = quesArr
            },
            submitAnswer() {
                this.showAnswer = true
            },
        },
        mounted() {
            this.changeQues()
        }
    }
</script>

<style  scoped>
</style>
